<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">  <div>
    <button @click="click">逆序</button>
    <button @click="popOne">删除一个</button>
</div>
    <div v-for="item in list">
        {{item}}
        <button @click="splice(index,list)">删除一个</button>
    </div>
    <div v-for="(item,index) in persons">
        {{item.name}}---{{index}}---
        {{item.num}}
        <button @click="splice(index,persons)">删除一个</button>
    </div>

</div>
<script>
    const App = {
        data() {
            return {
                list: [1, 2, 3, 4, 5],
                persons: [
                    {
                        "name": "珲少",
                        "num": "151xxxxxxxx"
                    },
                    {
                        "name": "Jaki",
                        "num": "151xxxxxxxxx"
                    },
                    {
                        "name": "Lucy",
                        "num": "151xxxxxxxx"
                    },
                    {
                        "name": "Monki",
                        "num": "151xxxxxxxx"
                    },
                    {
                        "name": "Bei",
                        "num": "151xxxxxxxxx"
                    }
                ]
            }
        },
        methods:{
            click(){
                this.list.reverse();
                this.persons.reverse();
            },
            popOne(){
                this.list.pop();
                this.persons.pop();
            },
            splice(index,list){
                list.splice(index,1);
            }
        }
    }
    Vue.createApp(App).mount("#Application");
</script>
</body>
</html>
